import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class ButtonPage extends StatefulWidget {
  const ButtonPage({Key? key}) : super(key: key);

  @override
  State<ButtonPage> createState() => _ButtonPageState();
}

class _ButtonPageState extends State<ButtonPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextView.text("按钮", isLineHeight: false),
        leading: InkWell(
          child: const Icon(
            Icons.arrow_back_ios,
            size: 16,
            color: Colors.black87,
          ),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        backgroundColor: Colors.white,
      ),
      body: Container(
        padding: const EdgeInsets.only(left: 16, right: 16, top: 10),
        child: SingleChildScrollView(
          child: buildCenter(context),
        ),
      ),
    );
  }

  Widget buildCenter(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        buildText("默认"),
        buildDefaultButton(),
        buildText("胶囊按钮"),
        buildCapsuleRow(),
        buildText("辅助按钮"),
        buildAuxiliaryRow(),
        buildText("线框按钮"),
        buildAuxiliaryRow2(),
        buildText("按钮大小"),
        buildSizeRow(),
        buildText("带图标"),
        buildIconRow(),
        buildText("底部按钮"),
        buildBottom(),
        const SizedBox(height: 35),
      ],
    );
  }

  Container buildText(String title) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 16),
      child: TextView.text(title, isLineHeight: false),
    );
  }

  Row buildCapsuleRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YJButton(
          onPressed: () {
            print("常规胶囊");
          },
          size: YJSize.LARGE,
          shape: YJButtonShape.pills,
          type: YJButtonType.solid,
          text: "常规胶囊",
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("辅助胶囊");
          },
          size: YJSize.LARGE,
          shape: YJButtonShape.pills,
          type: YJButtonType.solid,
          text: "辅助胶囊",
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
          enabled: false,
          disabledColor: const Color(0xffFFF0E5),
          disabledTextColor: const Color(0xffFF6A00),
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("线框胶囊");
          },
          size: YJSize.LARGE,
          shape: YJButtonShape.pills,
          type: YJButtonType.outline,
          text: "线框胶囊",
          color: YJColors.THEME_COLOR,
          textColor: YJColors.THEME_COLOR,
        ),
      ],
    );
  }

  Row buildSizeRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YJButton(
          onPressed: () {
            print("按钮");
          },
          size: YJSize.dp(24),
          padding: const EdgeInsets.symmetric(horizontal: 8),
          shape: YJButtonShape.standard,
          type: YJButtonType.solid,
          text: "按钮",
          textStyle: const TextStyle(fontSize: 12, color: YJColors.WHITE),
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("按钮");
          },
          size: YJSize.SMALL,
          shape: YJButtonShape.standard,
          type: YJButtonType.solid,
          text: "按钮",
          padding: const EdgeInsets.symmetric(horizontal: 14),
          textStyle: const TextStyle(fontSize: 14, color: YJColors.WHITE),
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("按钮");
          },
          size: YJSize.MEDIUM,
          shape: YJButtonShape.standard,
          type: YJButtonType.solid,
          padding: const EdgeInsets.symmetric(horizontal: 16),
          text: "按钮",
          textStyle: const TextStyle(fontSize: 16, color: YJColors.WHITE),
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("按钮");
          },
          size: YJSize.LARGE,
          shape: YJButtonShape.standard,
          type: YJButtonType.solid,
          text: "按钮",
          padding: const EdgeInsets.symmetric(horizontal: 18),
          textStyle: const TextStyle(fontSize: 18, color: YJColors.WHITE),
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
      ],
    );
  }

  Row buildDefaultButton() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YJButton(
          onPressed: () {
            print("主要按钮被点击了");
          },
          text: "主要按钮",
          color: YJColors.THEME_COLOR,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("禁用状态");
          },
          enabled: false,
          text: "禁用状态",
          color: YJColors.THEME_COLOR,
          disabledTextColor: Colors.white,
          textColor: Colors.white,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("置灰状态");
          },
          enabled: false,
          text: "置灰状态",
          color: YJColors.THEME_COLOR,
          disabledColor: const Color(0xffEDEDED),
          disabledTextColor: Colors.black45,
          textColor: Colors.white,
        ),
      ],
    );
  }

  buildAuxiliaryRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YJButton(
          onPressed: () {
            print("辅助按钮");
          },
          text: "辅助按钮",
          color: const Color(0xFFFFF0E5),
          textColor: YJColors.THEME_COLOR,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("辅助点击");
          },
          type: YJButtonType.solid,
          text: "辅助点击",
          color: const Color(0xFFFFD6B8),
          textColor: YJColors.THEME_COLOR,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("辅助禁用");
          },
          type: YJButtonType.solid,
          enabled: false,
          text: "辅助禁用",
          color: YJColors.THEME_COLOR,
          textColor: YJColors.THEME_COLOR,
          disabledColor: const Color(0xffFFF0E5),
          disabledTextColor: YJColors.THEME_COLOR,
        ),
      ],
    );
  }

  buildAuxiliaryRow2() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        YJButton(
          onPressed: () {
            print("辅助按钮");
          },
          text: "辅助按钮",
          type: YJButtonType.outline,
          color: YJColors.DISABLED_COLOR2,
          textColor: YJColors.THEME_COLOR,
          focusColor: YJColors.DISABLED_COLOR2,
          highlightColor: YJColors.DISABLED_COLOR2,
          splashColor: YJColors.TRANSPARENT,
          hoverColor: YJColors.TRANSPARENT,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("辅助禁用");
          },
          type: YJButtonType.outline,
          enabled: false,
          text: "辅助禁用",
          color: YJColors.THEME_COLOR,
          textColor: YJColors.THEME_COLOR,
          disabledColor: const Color(0xff99FF6A00),
          disabledTextColor: const Color(0xff99FF6A00),
        ),
      ],
    );
  }

  buildIconRow() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        YJButton(
          onPressed: () {
            print("辅助按钮");
          },
          type: YJButtonType.outline,
          text: "辅助按钮",
          color: YJColors.THEME_COLOR,
          textColor: YJColors.THEME_COLOR,
          icon: const Icon(
            Icons.home,
            color: YJColors.THEME_COLOR,
            size: 20,
          ),
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("主要按钮");
          },
          type: YJButtonType.solid,
          text: "主要按钮",
          color: YJColors.THEME_COLOR,
          textColor: YJColors.WHITE,
          icon: const Icon(
            Icons.add,
            color: Colors.white,
            size: 20,
          ),
        ),
      ],
    );
  }

  buildBottom() {
    return Column(
      children: [
        YJButton(
          onPressed: () {
            print("通栏按钮");
          },
          shape: YJButtonShape.square,
          text: "通栏按钮",
          fullWidthButton: true,
          color: YJColors.THEME_COLOR,
          textColor: YJColors.WHITE,
        ),
        const SizedBox(width: 10),
        YJButton(
          onPressed: () {
            print("主要按钮");
          },
          shape: YJButtonShape.standard,
          text: "主要按钮",
          fullWidthButton: true,
          color: YJColors.THEME_COLOR,
          textColor: YJColors.WHITE,
        )
      ],
    );
  }
}
